<!DOCTYPE html>
<html>
<head>
    <title>Circuit Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="circuitCanvas" width="550" height="450"></canvas>
    <script>
        const canvas = document.getElementById('circuitCanvas');
        const ctx = canvas.getContext('2d');

        ctx.strokeStyle = 'black';
        ctx.lineWidth = 2;
        ctx.fillStyle = 'black';

        // Helper function for drawing an arrow
        function drawArrow(ctx, fromx, fromy, tox, toy) {
            const headlen = 10; // length of head in pixels
            const dx = tox - fromx;
            const dy = toy - fromy;
            const angle = Math.atan2(dy, dx);
            ctx.moveTo(fromx, fromy);
            ctx.lineTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle - Math.PI / 6), toy - headlen * Math.sin(angle - Math.PI / 6));
            ctx.moveTo(tox, toy);
            ctx.lineTo(tox - headlen * Math.cos(angle + Math.PI / 6), toy - headlen * Math.sin(angle + Math.PI / 6));
        }
        
        // Helper function for drawing a dashed line
        function drawDashedLine(ctx, x1, y1, x2, y2, dashLen = 5) {
            ctx.setLineDash([dashLen, dashLen]);
            ctx.beginPath();
            ctx.moveTo(x1, y1);
            ctx.lineTo(x2, y2);
            ctx.stroke();
            ctx.setLineDash([]); // Reset to solid line
        }

        // --- Main Wires ---
        // Left vertical wire
        ctx.beginPath();
        ctx.moveTo(100, 50);
        ctx.lineTo(100, 400);
        ctx.stroke();

        // Top horizontal wire
        ctx.beginPath();
        ctx.moveTo(100, 50);
        ctx.lineTo(180, 50);
        ctx.stroke();

        // Wire from R1 to A
        ctx.beginPath();
        ctx.moveTo(280, 50);
        ctx.lineTo(350, 50);
        ctx.lineTo(350, 120);
        ctx.stroke();
        
        // Bottom horizontal wire
        ctx.beginPath();
        ctx.moveTo(100, 400);
        ctx.lineTo(350, 400);
        ctx.stroke();
        
        // Connection from B to bottom wire
        ctx.beginPath();
        ctx.moveTo(350, 380);
        ctx.lineTo(350, 400);
        ctx.stroke();

        // --- Components ---
        // EMF (ε)
        ctx.beginPath();
        ctx.moveTo(85, 220); // Positive terminal
        ctx.lineTo(115, 220);
        ctx.moveTo(90, 240); // Negative terminal
        ctx.lineTo(110, 240);
        ctx.stroke();
        ctx.font = 'italic 24px Times New Roman';
        ctx.fillText('ε', 60, 238);

        // Resistor R1
        ctx.strokeRect(180, 40, 100, 20);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('R', 220, 35);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('1', 235, 40);

        // Nodes A and B
        ctx.beginPath();
        ctx.arc(350, 120, 4, 0, 2 * Math.PI); // Node A
        ctx.fill();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('A', 360, 125);
        
        ctx.beginPath();
        ctx.arc(350, 380, 4, 0, 2 * Math.PI); // Node B
        ctx.fill();
        ctx.fillText('B', 360, 385);

        // --- Parallel Branches ---
        // Branch with R2 (left)
        ctx.beginPath();
        ctx.moveTo(350, 120);
        ctx.lineTo(250, 120);
        ctx.lineTo(250, 380);
        ctx.lineTo(350, 380);
        ctx.stroke();
        ctx.strokeRect(240, 220, 20, 80);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('R', 210, 260);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('2', 225, 265);

        // Branch with C (center)
        ctx.beginPath();
        ctx.moveTo(350, 120);
        ctx.lineTo(350, 235);
        ctx.moveTo(350, 265);
        ctx.lineTo(350, 380);
        ctx.stroke();
        // Capacitor C plates
        ctx.beginPath();
        ctx.moveTo(320, 235);
        ctx.lineTo(380, 235);
        ctx.moveTo(320, 265);
        ctx.lineTo(380, 265);
        ctx.stroke();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('C', 320, 290);

        // Branch with K and R3 (right)
        ctx.beginPath();
        ctx.moveTo(350, 120);
        ctx.lineTo(450, 120);
        ctx.lineTo(450, 380);
        ctx.lineTo(350, 380);
        ctx.stroke();
        
        // Switch K
        ctx.beginPath();
        ctx.moveTo(450, 150); // Hinge
        ctx.lineTo(470, 130); // Arm
        ctx.stroke();
        ctx.beginPath();
        ctx.arc(450, 150, 3, 0, 2 * Math.PI); // Hinge dot
        ctx.fill();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('K', 475, 140);

        // Resistor R3
        ctx.strokeRect(440, 220, 20, 80);
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('R', 465, 260);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('3', 480, 265);
        
        // --- Currents ---
        ctx.lineWidth = 1.5;
        
        // Current I1
        drawDashedLine(ctx, 260, 65, 200, 65);
        ctx.beginPath();
        drawArrow(ctx, 210, 65, 200, 65);
        ctx.stroke();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('I', 225, 85);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('1', 235, 90);

        // Current I2
        drawDashedLine(ctx, 250, 150, 250, 200);
        ctx.beginPath();
        drawArrow(ctx, 250, 190, 250, 200);
        ctx.stroke();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('I', 220, 175);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('2', 230, 180);
        
        // Current Ic
        drawDashedLine(ctx, 350, 160, 350, 210);
        ctx.beginPath();
        drawArrow(ctx, 350, 200, 350, 210);
        ctx.stroke();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('I', 320, 185);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('C', 330, 190);

        // Current I3
        drawDashedLine(ctx, 450, 170, 450, 210);
        ctx.beginPath();
        drawArrow(ctx, 450, 200, 450, 210);
        ctx.stroke();
        ctx.font = 'italic 22px Times New Roman';
        ctx.fillText('I', 420, 190);
        ctx.font = 'italic 16px Times New Roman';
        ctx.fillText('3', 430, 195);

    </script>
</body>
</html>